<template>
	<view class="list">
		<view class="list-left">
			<view :class="navIndex === index?'f-active-color':'f-color'" v-for="(item,index) in allLevelData"
				:key="index" @tap="change(index,$event)" id="list-left-item">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="list-right-item">
			<!-- 生鲜水果 -->
			<listItem :dataList='SubLevelData'></listItem>
		</view>
		<Tabbar cureentPage="list"></Tabbar>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import listItem from '../../components/list/list-item.vue'
	import CommodityList from '../../components/common/CommodityList.vue'
	import Tabbar from '../../components/common/TabBar.vue'
	export default {
		data() {
			return {
				navIndex: 0,
				//  snack freshFruit  NutritionalMilk appliance personalCare
				// 休闲零食 生鲜水果 营养奶品 家用电器 个人护理
				allLevelData: [],
				SubLevelData: [],
				itemID: 1
			}
		},
		components: {
			listItem,
			CommodityList,
			Tabbar
		},
		onLoad(e) {
			if (e.id) {
				let index = e.id - 1
				this.change(index)
			}
			this.getData()
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/add-list/add-list?id=' + this.itemID + ''
			})
		},
		methods: {
			change(index) {
				if (this.navIndex == index) {
					return;
				}
				this.navIndex = index
				let id = index + 1
				this.itemID = id
				//根据选择id渲染数据
				this.getItemData(id)
			},
			// 获取数据
			getData() {
				let id = this.itemID
				$http.request({
					url: "/list/getListData"
				}).then((res) => {
					this.allLevelData = res
					this.getItemData(id)
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			},
			getItemData(id) {
				$http.request({
					url: '/list/getListDataItem',
					data: {
						id: id
					}
				}).then((res) => {
					this.SubLevelData = res
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style scoped>
	.f-active-color {
		background-color: white;
	}

	.f-color {
		background-color: #efefef;
	}

	.list {
		display: flex;
	}

	.list-left {
		width: 150rpx;
		height: 1050rpx;
		background-color: #efefef;
	}

	#list-left-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		height: 100rpx;
		font-size: 26rpx;
		font-family: $uni-border-color;
	}

	.list-right-item {
		flex: 1;
	}
</style>